<template>
  <a-card>
    <a-form layout="inline" :form="form" @submit="handleSubmit">
      <a-row>
        <a-col :span="itemSpan">
          <a-form-item label="分类名称">
            <a-input placeholder="请输入分类名称" v-decorator="['title']"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="itemSpan">
          <a-form-item label="所属小程序">
            <a-select style="width:170px" v-decorator="['brandId',{initialValue:2738574294}]" placeholder="全部">
              <a-select-option :value="item.weid" v-for="item in brands" :key="item.weid">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="itemSpan*2" >
          <a-form-item>
            <a-button type="primary" html-type="submit">搜索</a-button>
            <a-button type="primary" @click="resetForm" class="ml-10">重置</a-button>
            <a-button type="primary" class="ml-10" @click="add(null)">新增</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      style="margin-top:20px"
      bordered
      :columns="columns"
      :rowKey="record => record.id"
      :data-source="dataSource"
      :pagination="pagination"
      :scroll="{ x: true }"
      @change="handleTableChange"
    >
       <span slot="brand" slot-scope="text, record">{{ searchBrand(record.brandId).name }}</span>
      <!--<span slot="status" slot-scope="text, record">{{ record.onlineState == 'Y' ? '启用' : '禁用' }}</span> -->
      <span slot="action" slot-scope="text, record">
        <a-icon type="arrow-up" class="sort" @click="move(record,'up',2)"/>
        <a-icon type="arrow-down" class="sort ml-10" @click="move(record,'down',2)"/>
        <a @click="add(record)" class="ml-10">编辑</a>
        <a @click="deleteService(record,2,'确认删除该问题分类吗？','删除后，分类下的问题将同步删除，且小程序将不再展示该分类')" class="ml-10">删除</a>
      </span>
    </a-table>
    <a-modal v-model="visible" width="60%" :title="showTitle+'问题分类'" :footer="null">
      <create @close="close" :info="categoryInfo" />
    </a-modal>
  </a-card>
</template>
<script>
import create from './form'
import { brands } from '../../util/brand'
import { listMixin } from '../../util/listMixin'
const columns = [
  {
    title: '问题分类',
    dataIndex: 'categoryName',
    align:'center'
    // key: 'name'
    // slots: { title: 'customTitle' },
    // scopedSlots: { customRender: 'name' },
  },
   {
    title: '所属小程序',
    align:'center',
    // dataIndex: 'brand',
    // key: 'name',
    // slots: { title: 'customTitle' },
    scopedSlots: { customRender: 'brand' },
  },
  {
    title: '创建时间',
    key: 'createTime',
    dataIndex: 'createTime',
    align:'center',
    // scopedSlots: { customRender: 'tags' },
  },
  {
    title: '操作',
    key: 'action',
    align:'center',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'category',
  mixins:[listMixin],
  components:{create},
  data() {
    return {
      itemSpan: 6,
      brands,
      visible: false,
      showTitle:'新增',
      categoryInfo:null,
      columns,
      url: {
        list: '/jic-backend-aftersale/aftersale/kefu/category/list',
        delete: '/jic-backend-wechat/wechat-client/template/link'
      }
    }
  },
  methods: {
    submit(e) {},
    close() {
      this.loadData()
      this.visible = false
      this.categoryInfo = null
    },
    add(record) {
      this.visible = true
      this.categoryInfo = record
      if(record == null){
        this.showTitle = '新增'
      }else{
        this.showTitle = '编辑'
      }
    },
  }
}
</script>
<style scoped>
.ml-10{
    margin-left: 10px;
}
.sort{
  color: #1890FF;
  /* margin-left: 10px; */
}
</style>
